<template>
  <view class="container">
		<view v-if="courseInfo.id" class="header">
			<view class="course-info flex-wrap">
				<view class="course-pic">
					<image :src="courseInfo.imghome" mode="aspectFit"></image>
				</view>
				<view class="course-cont">
					<view class="course-name">{{ courseInfo.name }}</view>
					<view class="course-desc">學費：<text>{{ courseInfo.price }}</text></view>
					<view class="course-desc">材料費：<text>{{ courseInfo.materialprice }}</text></view>
					<view class="course-collect flex-align" @click="handleCollect">
						<image :src="$getOSSImg(courseInfo.isfavorites ? 'collect_sel_icon.png' : 'collect_icon.png')" mode="aspectFill"></image>
						<text>收藏</text>
					</view>
				</view>
			</view>
			<view class="price-box flex-center">
				<block v-if="info.userActivtyinfo.percentage === 100"><text>砍價成功！</text></block>
				<block v-else>已砍價<text>{{ info.userActivtyinfo.chopPrice }}</text>元，還剩<text>{{ info.userActivtyinfo.resPrice }}元！</text></block>
			</view>
			<view class="progress-box">
				<u-line-progress
					:percentage="info.userActivtyinfo.percentage"
					:showText="false"
					height="8"
					active-color="#E9930A"
					inactive-color="#F3F4F6"
				/>
			</view>
			<u-button
				v-if="info.userActivtyinfo.bduserid === user.id"
				openType="share"
				shape="circle"
				color="#E9930A"
				text="分享好友"
				:customStyle="{ height: '82rpx' }"
			/>
			<u-button
				v-if="info.kjstates === 0"
				shape="circle"
				color="#E9930A"
				text="幫好友砍一刀"
				:customStyle="{ height: '82rpx' }"
				@click="handleHelp"
			/>
			<u-button
				v-if="info.kjstates === 1 || info.kjstates === 2"
				shape="circle"
				color="#E9930A"
				text="查看優惠券"
				:customStyle="{ height: '82rpx' }"
				@click="$navigator('/pages/mine/coupon')"
			/>
		</view>
		<block v-if="info.userActivtyRecordlist && info.userActivtyRecordlist.length">
			<u-gap height="10" bgColor="#F9F9F9"></u-gap>
			<view class="help-box">
				<view class="title">好友助力榜</view>
				<view class="list">
					<view v-for="item in info.userActivtyRecordlist" :key="item.id" class="item flex-space-b">
						<view class="flex-align">
							<image :src="item.photo" mode="aspectFill"></image>
							<text>{{ item.nickname }}</text>
						</view>
						<view class="price">{{ item.helpPrice }}元</view>
					</view>
				</view>
			</view>
		</block>
		<!-- 登录弹窗 -->
		<login-pop :force="true" @update="getInfo" />
	</view>
</template>

<script>
	import { getBtCourseActivity, getBtCourse, addShareActivity } from '@/api/course'
	import { addfavorites, cancelfavorites } from '@/api/user'
  export default {
		data() {
			return {
				info: {},
				courseInfo: {},
				id: 0,
				shareuid: 0
			}
		},
		async onLoad(o) {
			wx.hideShareMenu()
			this.shareuid = o.shareuid
			this.id = o.id
			await this.checkLogin()
			this.getInfo()
		},
		methods: {
			async getCourseInfo(Id) {
				const { data } = await getBtCourse({
					Id
				})
				data.coursedetail.isfavorites = data.isfavorites
				this.courseInfo = data.coursedetail
			},
			async getInfo() {
				const { data } = await getBtCourseActivity({
					UserActivityId: this.id,
					shareuid: this.shareuid
				})
				data.userActivtyinfo.percentage = (data.userActivtyinfo.chopPrice / data.userActivtyinfo.sumPrice) * 100
				this.info = data
				this.getCourseInfo(data.activtyinfo.courseId)
			},
			async handleCollect() {
				await this.checkLogin()
				if (this.courseInfo.isfavorites) {
					cancelfavorites({ courseid: this.courseInfo.id })
					this.courseInfo.isfavorites = false
				} else {
					addfavorites({ courseid: this.courseInfo.id })
					this.courseInfo.isfavorites = true
				}
			},
			async handleHelp() {
				const { data } = await addShareActivity({
					UserActivityId: this.id,
					shareuid: this.shareuid
				})
				uni.showModal({
					title: '溫馨提示',
					content: `已砍${data.helpPrice}元`,
					showCancel: false,
					confirmText: '確認',
					success: (r) => {
						if (r.confirm) {
						 this.getInfo()
						}
					}
				})
			}
		},
		async onShareTimeline() {
			const { id, bduserid } = this.info.userActivtyinfo
			return {
				title: '柏圖教育',
				path: `/pages/course/help?id=${id}&shareuid=${bduserid}`
			}
		},
		async onShareAppMessage() {
			return {
				title: '柏圖教育',
				path: `/pages/course/help?id=${id}&shareuid=${bduserid}`
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background: #fff;
		box-sizing: border-box;
	}
	.header {
		background-color: #fff;
		padding: 64rpx 20rpx 48rpx;
		box-sizing: border-box;
		.price-box {
			color: #000000;
			font-size: 32rpx;
			text {
				color: #ED3939;
			}
		}
		.progress-box {
			padding: 32rpx 0 48rpx;
		}
	}
	.course-info {
		margin-bottom: 80rpx;
		.course-pic {
			width: 296rpx;
			height: 214rpx;
			border-radius: 8rpx;
			margin-right: 32rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.course-cont {
			flex: 1;
			.course-name {
				color: #333333;
				font-size: 32rpx;
				font-weight: 500;
				line-height: 38rpx;
			}
			.course-desc {
				margin-top: 10rpx;
				color: #333333;
				font-size: 28rpx;
				text {
					color: #F22520;
					font-size: 32rpx;
					font-weight: 500;
				}
			}
			.course-collect {
				margin-top: 30rpx;
				color: #333;
				font-size: 28rpx;
				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;
				}
			}
		}
	}
	.help-box {
		background-color: #fff;
		padding: 32rpx;
		.title {
			color: #303133;
			font-size: 34rpx;
			font-weight: 500;
			padding-bottom: 32rpx;
		}
		.list {
			.item {
				margin-bottom: 32rpx;
				image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}
				text {
					color: #303133;
					font-size: 30rpx;
					padding-left: 20rpx;
				}
				.price {
					color: #ED3939;
					font-size: 30rpx;
				}
			}
		}
	}
</style>
